<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Arc Edge</title>
    <style>
      .g6-tooltip {
        border: 1px solid #e2e2e2;
        border-radius: 4px;
        font-size: 12px;
        color: #545454;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 10px 8px;
        box-shadow: rgb(174, 174, 174) 0px 0px 10px;
      }
    </style>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script src="../build/minimap.js"></script>
    <script src="./assets/d3-4.13.0.min.js"></script>
    <script src="./assets/jquery-3.2.1.min.js"></script>
    <script>
      const data = {
        nodes: [
          {
            id: 'node5',
            x: 100,
            y: 180,
            label: '5',
            size: 80,
          },
          {
            id: 'node6',
            x: 400,
            y: 150,
            label: '6',
            size: 50,
          },
          {
            id: 'node7',
            x: 600,
            y: 450,
            label: '7',
            size: 200,
          },
        ],
        edges: [
          {
            source: 'node6',
            target: 'node5',
            shape: 'arc',
            curveOffset: -150,
          },
          {
            source: 'node6',
            target: 'node5',
            shape: 'arc',
            curveOffset: 50,
          },
          {
            source: 'node5',
            target: 'node6',
            shape: 'arc',
            curveOffset: 50,
          },
          {
            source: 'node5',
            target: 'node7',
            shape: 'arc',
            controlPoints: [
              {
                x: 200,
                y: 315,
              },
            ],
          },
        ],
      };
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 600,
        linkCenter: true,
        modes: {
          default: ['drag-canvas'],
        },
        defaultEdge: {
          shape: 'arc',
          style: {
            lineWidth: 1,
            stroke: '#aaa',
          },
        },
      });
      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
